<!-- 个人中心 -->

<template>
    <div class="mine-page">
        <!-- 左侧菜单栏 -->
        <div class="left-menu">
            <el-menu
              class="el-menu"
              active-text-color="#ffd04b"
              background-color="#16B6A0"
              default-active="0"
              text-color="#fff"
              @select="menuSelect"
            >
                <el-menu-item 
                  class="el-menu-item"
                  :class="[selectIndex == 1 ? 'activity-item' : 'normal-item']" 
                  index="1"
                >
                    <img v-if="selectIndex == 1" src="@/assets/images/u7212.png" alt="">
                    <img v-else src="@/assets/images/u7211.png" alt="">
                    <span>企业信息</span>
                </el-menu-item>
                <el-menu-item
                  class="el-menu-item" 
                  :class="[selectIndex == 2 ? 'activity-item' : 'normal-item']" 
                  index="2"
                >
                    <img v-if="selectIndex == 2" src="@/assets/images/u9322.png" alt="">
                    <img v-else src="@/assets/images/u9321.png" alt="">
                    <span>参与投标</span>
                </el-menu-item>
                <el-menu-item 
                   class="el-menu-item"
                  :class="[selectIndex == 3 ? 'activity-item' : 'normal-item']" 
                  index="3"
                >
                    <img v-if="selectIndex == 3" src="@/assets/images/u1162.png" alt="">
                    <img v-else src="@/assets/images/u1161.png" alt="">
                    <span>我的投标</span>
                </el-menu-item>
            </el-menu>
        </div>
        <!-- 右侧内容区 -->
        <div class="right-content">
            <router-view />
        </div>
    </div>
</template>

<script>
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'

export default {
    setup() {
        const router = useRouter()
        const store = useStore()
        // 点击侧边菜单
        function menuSelect(index) {
            if (index == 1) { // 企业信息
                console.log('企业信息');
                router.push({
                    name: 'EnterpriseInfo'
                })
            } else if (index == 2) { // 参与投标
                console.log('参与投标');
                router.push({
                    name: 'ParticipateBidding'
                })
            } else if (index == 3) { // 我的投标
                console.log('我的投标');
                router.push({
                    name: 'MyBid'
                })
            }
        }
        return {
            menuSelect,
            // 在 computed 函数中访问 state
            selectIndex: computed(() => store.state.mineIndex)
        }
    }
}
</script>

<style scoped>
.mine-page {
    height: 100%;
    display: flex;
    flex-direction: row;
}
.left-menu {
    width: 200px;
    height: 100%;
}
.el-menu {
    height: calc(100% - 20px);
    padding-top: 30px;
    border-radius: 10px;
}
.el-menu-item {
    font-size: 17px;
}
.el-menu-item img {
    margin-right: 15px;
}
.normal-item {
    background: #16B6A0;
    color: #fff;
    margin: 10px 20px;
    border-radius: 10px;
}
.activity-item {
    background: #fff;
    color: #16B6A0;
    margin: 10px 20px;
    border-radius: 10px;
}
.right-content {
    width: calc(100% - 220px);
    height: calc(100% - 20px);
    background: #fff;
    border-radius: 10px;
    margin-left: 20px;
    display: inline-block;
}
</style>